<template>
	<div>
		<el-form :inline="true" size="mini">
			
			<el-form-item>
				
				<el-button type="primary" @click="disableAddRoomType=true">新增房间类型</el-button>
			</el-form-item>
		</el-form>
		
		<el-table :data="rooms" style="100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection"></el-table-column>
			<el-table-column
			  label="房间编号"
			  prop="id"
			  width="80"
			></el-table-column>
			
			<el-table-column label="房间类型" width="100">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.roletype" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.roletype}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="房间人数" width="100">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.roomnum" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.roomnum}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-button @click="handleTypeSave(scope) " size="mini">保存</el-button>
						<el-button @click="scope.row.edit=false" size="mini">取消</el-button>
					</template>
					<template v-else>
						<el-button @click="handleTypeEdit(scope)" size="mini">编辑</el-button>
						<el-button @click="handleTypeDel(scope)" size="mini">删除</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog :visible.sync="disableAddRoomType" title="新增房间" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="房间类型">
					<el-input v-model="type.roletype" placeholder="房间类型"></el-input>
				</el-form-item>
				<el-form-item label="房间人数">
					<el-input v-model="type.roomnum" placeholder="房间人数"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="disableAddRoomType=false">取消</el-button>
					<el-button type="primary" @click="insertType()">保存</el-button>
				</el-form-item>
			</el-form>
			
		</el-dialog>
		
		<div slot="footer">
			<el-button type="danger" size="mini" :disabled="ids.length==0" @click="batchDelete">批量删除</el-button>			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				keyword:"",
				type:{},
				disableAddRoomType:false,
				
				rooms:[],
				ids:[]
				
			}
		},
		methods:{
			
			//保存
			handleTypeSave(scope){
				let url = "Roommanage/update";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){
						scope.row.edit = false;
						scope.row.roletype = this.type.roletype;
						scope.row.roomnum = this.type.roomnum;
					}
				})
			},
			//编辑
			handleTypeEdit(scope){
				this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			//删除
			handleTypeDel(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "Roommanage/delete";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.getAllRoom();
						}
					});
				}).catch(()=>{
					console.log("cancel");
				});
			},
			//新增保存方法
			insertType(){
				let url = "Roommanage/insert";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data ==1){
						this.getAllRoom();
						this.disableAddRoomType = false;
						this.type = {};
					}
				})
			},
			//批量删除
			batchDelete(){
				
				this.$confirm("是否删除？","提示").then(()=>{
					let url = "Roommanage/batchDeleteRoom";
					axios.post(url,this.ids).then(resp=>{
						if(resp.data.data>0){
							this.$alert("删除成功！");
							this.getAllRoom();
						}
					});
				}).catch(err=>{
					this.$alert(err);
				})
			},
			getAllRoom(){
				let url = "Roommanage/getAllRoom";
				
				axios.post(url).then(resp=>{
					this.rooms = resp.data.data;
					
				});
			},
			handleSelectionChange(item){
				this.ids = item.map(o=>o.id);
			}
			
		},
		created(){
			this.getAllRoom();
			
		}
	}
</script>

<style>
	
</style>